<template>
  <div class="plugin-body">
    <div class="banner">
      <img src="@/assets/community-banner.png" class="img" />
      <span class="head-text">见微社区</span>
      <span class="content-text">探索见微平台更多应用 期待您的参与交流</span>
    </div>
    <div v-if="!searchVisible" class="fake-search-input" @click="showInput">
      <span>
        <a-icon
          type="search"
          style="height: 20px; margin-right: 20px; width: 20px;"
        />搜索算法、模型、教程视频
      </span>
    </div>

    <a-input-search
      v-else
      id="search-input"
      v-model="searchInput"
      allow-clear
      auto-focus
      class="search-input"
      placeholder="搜索算法、模型、教程视频"
      @search="clickSearch"
      @blur="loseFocus"
    />
    <div class="model-algo">
      <a-row type="flex">
        <a-col flex="auto" align="left"
          ><strong class="big-title">算法&模型</strong></a-col
        >
        <a-col flex="auto" align="right" class="primary"
          ><router-link to="/management/plugin/result?tab=1"
            >查看全部</router-link
          ></a-col
        >
      </a-row>

      <a-row
        v-for="index in pluginList.length / 2"
        :key="`plugin-${index}`"
        justify="space-between"
        class="plugin-row"
      >
        <a-col :span="12">
          <plugin
            :id="(index - 1) * 2"
            :cell="pluginList[(index - 1) * 2]"
            @click.native="viewDetail(pluginList[(index - 1) * 2])"
            @update-list="getPluginList"
          />
        </a-col>
        <a-col :span="12" align="right">
          <plugin
            :id="(index - 1) * 2 + 1"
            :cell="pluginList[(index - 1) * 2 + 1]"
            @click.native="viewDetail(pluginList[(index - 1) * 2 + 1])"
            @update-list="getPluginList"
          />
        </a-col>
      </a-row>

      <a-row type="flex" style="margin-top: 68px;">
        <a-col flex="auto" align="left"
          ><strong class="big-title">案例</strong></a-col
        >
        <a-col flex="auto" align="right" class="primary"
          ><router-link to="/management/plugin/result?tab=2"
            >查看全部</router-link
          ></a-col
        >
      </a-row>

      <div class="example-list">
        <div
          v-for="item in caseType"
          :key="`case-type-${item.title}`"
          class="exmaple"
          @click="viewCaseByType(item)"
        >
          <img class="img" :src="item.img" />
          <p>
            <strong class="normal">{{ item.title }}案例</strong>
          </p>
        </div>
      </div>
    </div>
  </div>
</template>

<script lang="ts">
import { Component, Vue } from 'vue-property-decorator'
import Plugin from '@/views/plugin/Plugin.vue'
import { newCaseAndMost } from '@/api/plugin'

@Component({
  components: { Plugin },
})
export default class PluginHome extends Vue {
  public pluginList: any = [
    {
      name: '-',
      keyword: '-',
      type: 0,
      install: false,
    },
    {
      name: '-',
      keyword: '-',
      type: 0,
      install: false,
    },
  ]

  public caseType: any = [
    {
      title: '经典',
      img: require('@/assets/classic.png'),
    },
    {
      title: '进阶',
      img: require('@/assets/advanced.png'),
    },
    {
      title: '入门',
      img: require('@/assets/beginner.png'),
    },
  ]

  public searchInput: any = ''
  public searchVisible: boolean = false

  public created() {
    this.getPluginList()
  }

  public showInput() {
    this.searchVisible = true
    const input: any = document.querySelector('#search-input')
    input?.focus()
  }

  public clickSearch() {
    this.$router.push(`/management/plugin/result?tab=1&key=${this.searchInput}`)
  }

  public styleChange() {
    const input: any = document.querySelector('.input-content')
    const inputWrapper = document.querySelector('.input-wrapper')
    inputWrapper?.classList.add('active')
    input?.focus()
  }
  public loseFocus() {
    const inputWrapper = document.querySelector('.input-wrapper')
    if (this.searchInput.length === 0) {
      this.searchVisible = false
      inputWrapper?.classList.remove('active')
    }
  }

  public async viewDetail(item: any) {
    if (item.type === 1) {
      this.$router.push({
        path: `/management/plugin/algorithm?id=${item.id}`,
        params: item,
      })
    } else {
      this.$router.push({
        path: `/management/plugin/detail?id=${item.id}`,
        params: item,
      })
    }
  }

  public async getPluginList() {
    const response = await newCaseAndMost()
    if (response.data.code === 100) {
      this.pluginList = response.data.result?.data
    } else {
      this.$message.error(response.data.message)
    }
  }

  public viewCaseByType(type: any) {
    this.$router.push(`/management/plugin/result?tab=2&field=${type.title}`)
  }
}
</script>

<style lang="less" scoped>
@import '@/constants';

/deep/ .ant-input:hover {
  border-color: #6973ff !important;
}

/deep/ .ant-input:focus {
  border-color: #6973ff !important;
}

.plugin-body {
  height: 100%;
  // padding: 16px;
  text-align: center;

  .banner {
    // display: inline-block;
    height: 220px;
    // margin: 2% auto 1%;
    position: relative;
    // max-width: 1440px;
    // min-width: 1440px;
    width: 100%;

    .img {
      height: 100%;
      width: 100%;
    }

    .head-text {
      color: #fff;
      font-size: 32px;
      left: 132px;
      position: absolute;
      top: 52px;
    }

    .content-text {
      color: #fff;
      font-size: 20px;
      left: 132px;
      position: absolute;
      top: 120px;
    }
  }

  .fake-search-input {
    background: #fff;
    border: 1px solid #e9e9e9;
    border-radius: 24px;
    display: inline-block;
    height: 46px;
    margin: 44px 0;
    text-align: center;
    width: 1176px;

    span {
      color: #c9c9c9;
      font-size: 16px;
      line-height: 46px;
    }

    &:hover {
      border: 1px solid #6973ff !important;
    }
  }

  .search-input {
    margin: 40px 0;
    margin-bottom: 44px;
    max-width: 1176px;

    /deep/ .ant-input {
      border: 1px solid #e9e9e9;
      border-radius: 24px;
      font-size: 16px;
      height: 46px;
      padding: 0 32px;
    }
  }

  .model-algo {
    padding: 0 calc((100vw - 1309px) / 2);
    // width: 1292px;

    .plugin-row {
      margin-top: 32px;
    }

    .example-list {
      align-items: center;
      display: flex;
      justify-content: space-between;
      margin-top: 32px;
      padding-bottom: 74px;
      width: 1292px;

      .exmaple {
        background: #fff;
        border: 1px solid #e9e9e9;
        border-radius: 5px;
        cursor: pointer;
        height: 258px;
        width: 392px;

        &:hover {
          box-shadow: 0 6px 27px 0 rgba(105, 115, 255, 0.09),
            0 2px 5px -5px rgba(137, 142, 207, 0.29);
        }

        .img {
          height: 100px;
          margin-bottom: 40px;
          margin-top: 48px;
          width: 100px;
        }
      }
    }
  }
}

.primary {
  color: #6973ff;
  cursor: pointer;
  font-size: 16px;
}

.big-title {
  color: #222432;
  font-size: 18px;
}

.normal {
  color: #373b52;
  font-size: 16px;
}
</style>
